<template>
  <Card class="card">
    <div class="right-container">
      <h3 class="title">程序员需求人数</h3>
      <div class="list-container">
        <div class="row active">
          <div class="col col-1">日期</div>
          <div class="col col-2">地址</div>
          <div class="col col-1">人数</div>
        </div>
        <div
          class="list-main"
          @mouseenter="handleMouseEnter"
          @mouseleave="handleMouseLeave"
        >
          <div
            :style="{
              transform: `translateY(${top}px)`,
            }"
            ref="divRef"
          >
            <div :style="{ height: startIndex * 30 + 'px' }"></div>
            <div class="row" v-for="item in filterList" :key="item.id">
              <div class="col col-1">{{ item.date }}</div>
              <div class="col col-2">{{ item.address }}</div>
              <div class="col col-1">{{ item.number }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { ref, onBeforeUnmount, computed } from "vue";
import Card from "@/components/Card/index.vue";
import useWebSocket from "@/utils/webSocket";

defineOptions({
  name: "Right",
});

interface IItem {
  id: string;
  date: string;
  address: string;
  number: number;
}
type IList = IItem[];

const list = ref<IList>([]);
const startIndex = ref(0);
const endIndex = ref(20);

const top = ref(0);

const filterList = computed(() => {
  return list.value.slice(startIndex.value, endIndex.value);
});

const socket = useWebSocket("ws://localhost:4000");
// socket.ws.addEventListener("message", (e) => {
//   console.log(e.data);
// });

socket.onMessage(function (data) {
  list.value = [...list.value, ...data];
  start();
});

let timeId: NodeJS.Timeout;
let isMouseEnter = false;
const divRef = ref<HTMLDivElement>();

const start = () => {
  if (list.value.length <= 17 || isMouseEnter) return;
  clearInterval(timeId);
  timeId = setInterval(() => {
    if (divRef.value!.clientHeight - -top.value <= 498) return;
    top.value -= 0.6;
    const num = -Math.ceil(top.value / 30);
    startIndex.value = num;
    endIndex.value = num + 20;
  }, 1000 / 60);
};

onBeforeUnmount(() => {
  clearInterval(timeId);
});

const handleMouseEnter = () => {
  clearInterval(timeId);
  isMouseEnter = true;
};

const handleMouseLeave = () => {
  isMouseEnter = false;
  start();
};
</script>

<style scoped lang="scss">
.card {
  height: 100%;
}

.right-container {
  height: 100%;
  padding: 10px 10px 0 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.title {
  margin: 0 0 10px 0;
  text-align: center;
  color: #fff;
  font-size: 12px;
  height: 15px;
}

.list-container {
  height: calc(100% - 25px);
}

.list-main {
  overflow: hidden;
}

.row {
  height: 30px;
  display: flex;
  font-size: 12px;
  align-items: center;
  color: #61a8ff;
  &:hover {
    @extend .active;
  }
}
.active {
  background-color: rgba(255, 255, 255, 0.1);
  color: #68d8fe;
  cursor: pointer;
}
.col {
  text-align: center;
}
.col-1 {
  flex: 1;
}
.col-2 {
  flex: 2;
}
</style>
